$(document).ready(function () {
    Judgeidentity();
    loadTableData();
    $("span.pie1").peity("pie", {
        fill: ['#3f64da', '#39cc99', '#ffffff'],
        width: 40, height: 40, 
    })
    $("span.pie2").peity("pie", {
        fill: ['#f0d261', '#42d2f3', '#ffffff'],
        width: 40, height: 40,
    })
    $("span.pie3").peity("pie", {
        fill: ['#c85f6c', '#e1a84c', '#ffffff'],
        width: 40, height: 40,
    })
})


//加载表格数据
function loadTableData() {

    var data = [{
        "name": '马群科创中心A栋',
        "address": '仙林大道18号',
        "duration": '紫竹物业',
        "phone": '18956487756',
        "fireSquadron": '马群中队',
        "fireSquadronPhone": '13658495565',
        "score": '84'
    }, {
        "name": '马群科创中心B栋',
        "address": '仙林大道18号',
        "duration": '紫竹物业',
        "phone": '18956487756',
        "fireSquadron": '马群中队',
        "fireSquadronPhone": '13658495565',
        "score": '54'
    }, {
        "name": '马群科创中心C栋',
        "address": '仙林大道18号',
        "duration": '紫竹物业',
        "phone": '18956487756',
        "fireSquadron": '马群中队',
        "fireSquadronPhone": '13658495565',
        "score": '66'
    }, {
        "name": '紫东创业园A栋',
        "address": '仙林大道18号',
        "duration": '紫竹物业',
        "phone": '18956487756',
        "fireSquadron": '马群中队',
        "fireSquadronPhone": '13658495565',
        "score": '98'
    }, {
        "name": '紫东创业园B栋',
        "address": '仙林大道18号',
        "duration": '紫竹物业',
        "phone": '18956487756',
        "fireSquadron": '马群中队',
        "fireSquadronPhone": '13658495565',
        "score": '89'
    }, {
        "name": '紫东创业园C栋',
        "address": '仙林大道18号',
        "duration": '紫竹物业',
        "phone": '18956487756',
        "fireSquadron": '马群中队',
        "fireSquadronPhone": '13658495565',
        "score": '65'
    }, {
        "name": '紫东创业园D栋',
        "address": '仙林大道18号',
        "duration": '紫竹物业',
        "phone": '18956487756',
        "fireSquadron": '马群中队',
        "fireSquadronPhone": '13658495565',
        "score": '78'
    }]

    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            title: '',
            text: {
                none: '暂无数据'
            },
            elem: '#body-content-table',
            skin: 'nob',
            data: data,
            page: { limit: 13, } //开启分页
            ,
            cols: [
                [ //表头
                    { field: 'name', title: '单位名称', align: 'center' },
                    { field: 'address', title: '地址', width: 150, align: 'center', },
                    { field: 'duration', title: '物业单位', align: 'center' },
                    { field: 'phone', title: '物业电话', align: 'center' },
                    { field: 'fireSquadron', title: '消防中队', align: 'center' },
                    { field: 'fireSquadronPhone', title: '中队电话', align: 'center' },
                    { field: 'score', title: '安全指数', align: 'center' },
                    {
                        title: '详情',
                        align: 'center',
                        templet: function (d) {
                            let res = JSON.stringify(d);
                            return `<div><div class="table-tool">
                                    <div onclick='assignTo()'><img src="../static/img/detail.png">详情</div>
                                  </div></div>`
                        },
                    },
                ]
            ]
        });

    });
}

assignTo=()=>{
    $('.editcar').fadeIn();
    showChart();
}

$('#editcar-close').click(function () {
    $('.editcar').fadeOut();
})


showChart=()=>{
    let bgColor = '#fff', fontColor = '#fff';
    let chartData = [
        { name: '1月', value: 78 },
        { name: '2月', value: 82 },
        { name: '3月', value: 85 },
        { name: '4月', value: 81 },
        { name: '5月', value: 79 },
        { name: '6月', value: 82 },
        { name: '7月', value: 86 },
        { name: '8月', value: 88 },
        { name: '9月', value: 75 },
        { name: '10月', value: 91 },
        { name: '11月', value: 87 },
        { name: '12月', value: 76 }
    ]

    let xData = chartData.map(v => v.name);
    let sData = chartData.map(v => v.value);
    let lineOption = {
        lineStyle: {
            color: '#3b538c',
        }
    }

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '5%',
            right: '5%',
            left: '7%',
            bottom: '15%'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLine: lineOption,
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 10,
                color: fontColor,
            },
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: fontColor,
            },
            axisTick: {
                show: false
            },
            axisLine: lineOption,
            splitLine: lineOption,
        }, {
            axisLine: lineOption,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            type: 'line',
            data: sData,
            barWidth: '20px',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#2381f1' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#31d2ff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            label: {
                show: true,
                position: "top",
                color: 'white'
            },
            itemStyle: {
                color: '#31d2ff'
            }
        }]
    };
    var charts1 = echarts.init(document.getElementById('chart'));
    charts1.setOption(option);
}